<template>
	<view class="content">
		<uni-search-bar   @focus="focus" placeholder="请输入新闻标签" />
		
		<swiper 
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		 circular=true 
		 indicator-active-color='#1296db'
		 >
			<swiper-item v-for="(item,index) in bannerlist" :key='item.id'>
				<view class="swiper-item">
					<image class="img" :src="item.advImg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<uni-section title="服务" type="line" padding>	
					
			<uni-grid :column="5" :highlight="true" :show-border="false" @change='clickOneSer'>
				<uni-grid-item v-for="(item, index) in growlist" :index="index" :key="item.id">
					<view class="grid-item-box" style="background-color: #fff;">
						<image :src='item.imgUrl' class="image" mode="aspectFill" />
						<text class="text">{{item.serviceName}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			
		</uni-section>
		
		<uni-section title="新闻" type="line" padding>
		  
		  <view class="fixedit" :style="{top:top}">
		  	<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
		  		<view v-for="(cate, index) in newlist" :key="index" :data-cateid="cate.id" :data-index="index" :class="[current == index ? 'grace-tab-current' : '']" @tap="tabChange">{{cate.name}}</view>
		  	</scroll-view>
		  </view>
		  
		</uni-section>
	
		
		
		<uni-card v-for="item in newdatalist" :key="item.id" :cover="item.cover" @click="newde(item.id)">
			
	       <text class="left">{{item.title}}</text>
			<template v-slot:actions>
					<view class="card-actions">
						<view class="card-actions-item" >
							<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">评论{{item.commentNum}}</text>
						</view>
						<view class="card-actions-item" >
							<uni-icons type="heart" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">点赞{{item.likeNum}}</text>
						</view>
						<view class="card-actions-item" >
							<uni-icons type="fire" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text">已读{{item.readNum}}</text>
						</view>
					</view>
				</template>
			
		</uni-card>

		<uni-pagination title="标题文字" prev-text="上一页" next-text="下一页"  @change="changepage"  :total="total" current="1"/>
		

		
	</view>
</template>

<script setup>

import {onMounted, ref} from 'vue';
import {getbanner,getallser,getnew,getnewlist} from '../../api/homeApi.js';
import {baseurl} from '../../api/request.js'
import {banner,service,fenlei,newws} from '@/mock/home.js'

let bannerlist = ref([])  //轮播图列表
let growlist= ref([])   //宫格列表
let newlist =ref([])   //新闻列表
let current= ref(0)   //新闻列表当前下标
let id = ref(0)      //新闻id
let pageNum = ref(1)   //当前页码
let pageSize =ref(10)  //每页数据条数
let newdatalist =ref([])  //新闻
let top =ref(0)
let total = ref()

//点击新闻每一项
const newde=(e)=>{
	console.log(e);
	
	uni.navigateTo({
		url:`/pages/index/newsde/newsde?id=${e}`
	})
}

//点击搜索
const focus=()=>{
	console.log('搜索结果相关新闻资讯列表页面');
}

//点击下一页上一页
const changepage=(e)=>{
	pageNum.value=e.current
	getnewsdata()
}

//点击热门主题
const tabChange=async(e)=>{
	
	current.value =e.target.dataset.index;
	let id =e.target.dataset.cateid;
	
    console.log(current.value);
	
   if(current.value==0){  //根据新闻标题的id 显示不同的内容
   
	//静态数据
	newdatalist.value=newws(0).rows
	total.value=newws(0).total
	
   }else{
	 let res = await getnewlist({
	 	data:{
	 		 pageSize:pageSize.value,
	 		 pageNum:pageNum.value,
			 type:id
	 	}
	 })
	 
	 if(res.code==200){
	 	newdatalist.value=res.rows
	 	total.value=res.total
	 }else{
		 //静态数据
		 newdatalist.value=newws(current.value).rows
		 total.value=newws(current.value).rows.length
		 
	 }
	 console.log(newdatalist.value);  
   }
  
   
}
//获取新闻列表
const getnewsdata=async()=>{
	
	let res = await getnewlist({
		data:{
			 pageNum :pageSize.value,
			 pageSize :pageNum.value,
		}
	})
	
	if(res.code==200){
		newdatalist.value=res.rows
		total.value=res.total
	}else{
		//静态数据
		newdatalist.value=newws(0).rows
		total.value=newws(0).total
		
	}
	console.log(newdatalist.value);
	console.log(total.value);
}

//获取新闻分类
const getnewdata= async()=>{
	let res = await getnew({
		data:{}
	})
	if(res.code==200){
		
		let frist =[{
			id:0,
			name:'全部'
		}]
		newlist.value=frist.concat(res.data)
		
	}else{
		//静态数据
		let frist =[{
			id:0,
			name:'全部'
		}]
		newlist.value=frist.concat(fenlei())
	}
	console.log(newlist.value);
	
}

//点击服务的每一个小图标
const clickOneSer= async(evt)=>{
	let index = evt.detail.index
	let item = growlist.value[index]
	
	if(item.link){   //点击原本的跳转对应页面   点击更多跳转到tabbar
		uni.navigateTo({
			url:'/pages/'+item.link
		})
	}else{
		uni.switchTab({
			url:'/pages/allser/allser'
		})
	}
}

//获取全部服务
const getallservice=async()=>{
	let res = await getallser({})
	
	if(res.code==200){
		let rows = res.rows   // 将数组先存起来  判断 数组长度是否大于10 大于10截取 小于10不截取
		let lastitem={
			id: 0,
			serviceName:'更多',
			imgUrl:'../../static/allser1.png',
		}  //自己定义最后一个图标的信息 添加到数组中
		growlist.value=res.rows.length>10?res.rows.splice(0,9).map(item=>{
			item.imgUrl=baseurl+item.imgUrl
			return item
		}).concat([lastitem]):rows
	}else{
		//静态数据
		let rows = service()  // 将数组先存起来  判断 数组长度是否大于10 大于10截取 小于10不截取
		let lastitem={
			id: 0,
			serviceName:'更多',
			imgUrl:'../../static/allser1.png',
		}  //自己定义最后一个图标的信息 添加到数组中
		growlist.value=rows.length>10?rows.splice(0,9).concat([lastitem]):rows
		
	}
	
	console.log(growlist.value);
    
}

//获取轮播图
const getbannerdata = async()=>{
	
	let res = await getbanner({
		data:{
		type:2
		}
	})
	
	if(res.code==200){
		bannerlist.value=res.rows
	}else{
		//静态数据
		bannerlist.value=banner()
	}
	console.log(bannerlist.value);
  
}

onMounted(()=>{
	getbannerdata()
	getallservice()
	getnewdata()
	getnewsdata()
	
})
</script>

<style lang='scss'>
 .content{
	 width: 100%;
	 
	 .swiper {
	   width: 100%;
	    height: 150px;
	 }
	 .swiper-item {
	   width: 100%;
	   height: 150px;
	 		
	 	.img{
	 	 width: 100%;
	 	 height:100%;
	 		  
	 	}
	 }
	

	 .grid-item-box{
		display: flex;
		flex-direction: column;
		align-items: center;
	
		 
	  .image{
	  	width: 80rpx;
	  	height: 80rpx;
		padding-top: 12rpx;
	  }
	  .text {
		/* width: 100%;
		 text-align: center; */
		 padding-top: 8rpx; 
		 font-size: 18rpx;
		 white-space: nowrap;
		 overflow: hidden;
		 text-overflow: ellipsis;
	  } 
	 }
	  
	.uni-pagination{
	padding: 4px 16px;
	}
	 
	.card-actions{
		 padding: 4px 10px;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 
		 .card-actions-item-text{
			 vertical-align: top;
			 color: #6a6a6a;
			 margin-left: 2px;
	    }
	}

	 
 }
</style>
